import { FC, useState } from "react";
import useLoadQuestionData from "../../../hooks/useLoadQuestionData";
import { Button, Result, Spin } from "antd";
import { useNavigate } from "react-router-dom";
import { useTitle } from "ahooks";
import useGetPageInfo from "@/hooks/useGetPageInfo";
import StatHeader from "./StatHeader";
import ComponentLib from "./ComponentLib";
import PageStat from "./PageStat";
import ChartStat from "./ChartStat";
const Stat: FC = () => {
  const { loading } = useLoadQuestionData();
  const { isPublished, title } = useGetPageInfo();

  const nav = useNavigate();

  //状态提升
  const [selectedComponentId, setSelectedComponentId] = useState<string>("");
  const [selectedComponentType, setSelectedComponentType] =
    useState<string>("");

  useTitle(`问卷统计 - ${title}`);
  //OutletProvider已经加了
  // if (loading) {
  //   return (
  //     <div className="h-screen w-full flex justify-center items-center">
  //       <Spin spinning={loading}></Spin>
  //     </div>
  //   );
  // }

  // if (loading) {
  //   return (
  //     <div className="h-screen w-full flex justify-center items-center">
  //       <Spin spinning={loading}></Spin>
  //     </div>
  //   );
  // }
  const LoadingElement = (
    <div className="h-screen w-full flex justify-center items-center">
      <Spin spinning={loading}></Spin>
    </div>
  );

  function getContentElement() {
    console.log(isPublished);
    if (typeof isPublished === "boolean" && !isPublished) {
      return (
        <Result
          title="问卷未发布"
          subTitle="问卷未发布，不能查看统计"
          extra={
            <Button type="primary" onClick={() => nav(-1)}>
              返回
            </Button>
          }
        />
      );
    } else if (typeof isPublished === "boolean" && isPublished) {
      //问卷内容
      return (
        <div className="w-full h-full bg-gray-100 flex p-4 overflow-hidden">
          <div className="w-1/4 h-full bg-white overflow-auto">
            <ComponentLib
              selectedComponentId={selectedComponentId}
              setSelectedComponentId={setSelectedComponentId}
              setSelectedComponentType={setSelectedComponentType}
            />
          </div>
          <div className="flex-1 mx-5 bg-white p-4">
            <PageStat
              selectedComponentId={selectedComponentId}
              setSelectedComponentId={setSelectedComponentId}
              setSelectedComponentType={setSelectedComponentType}
            />
          </div>
          <div className="w-1/4 bg-white">
            <ChartStat
              selectedComponentId={selectedComponentId}
              selectedComponentType={selectedComponentType}
            />
          </div>
        </div>
      );
    }
  }

  return (
    <div className="w-full h-screen flex flex-col">
      <StatHeader />
      {loading ? LoadingElement : null}
      {!loading && getContentElement()}
    </div>
  );
};

export default Stat;
